<template>
  <div class="recon-sale">
    <div class="recon-sale-top">
      <h3>筛选查询</h3>
      <div class="search-box">
        <div class="search-time">
          <span>订单编号：</span>
          <div class="inp-box">
            <el-input
              v-model="input"
              placeholder="请输入内容"
              clearable
              @change="selStatus"
            />
          </div>
        </div>
        <div class="sale-status">
          <span>金额范围：</span>
          <el-input
            v-model="smallPrice"
            style="width:120px"
            placeholder="最小金额"
            clearable
            @change="selStatus"
          />
          <i>到</i>
          <el-input
            v-model="bigPrice"
            style="width:120px"
            placeholder="最大金额"
            clearable
            @change="selStatus"
          />
        </div>
        <div class="recon-status">
          <span>对账状态：</span>
          <el-select
            v-model="value2"
            placeholder="请选择"
            clearable
            @change="selStatus"
          >
            <el-option
              v-for="item in reconOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div
          class="search-btn"
          @click="searchBtn"
        >搜索</div>
      </div>
    </div>
    <div class="recon-sale-bot">
      <h3>数据列表</h3>
      <div class="recon-sale-bot-sel">
        <!-- <div
class="exportBtn"
             @click="setUpBtn"
>批量对账</div> -->
        <!-- <div
          class="exportBtn"
          @click="exportBtn"
        >导出数据</div> -->
        <div class="show-num">
          <el-select
            v-model="showNum"
            style="width:106px"
            placeholder="显示条数"
            @change="selBar"
          >
            <el-option
              v-for="item in showNumList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <!-- <div class="sort-type">
          <el-select v-model="sortType"
                     style="width:106px"
                     placeholder="显示排序">
            <el-option v-for="item in sortTypeList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value" />
          </el-select>
        </div> -->
      </div>
      <div class="recon-sale-bot-table">
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            align="center"
          />
          <el-table-column
            prop="order.orderCode"
            label="订单编号"
            align="center"
          />
          <el-table-column
            prop="order.totalPrice"
            label="支付金额"
            align="center"
          />
          <el-table-column
            prop="order.payType"
            label="支付方式"
            align="center"
          />
          <el-table-column
            prop="order.payTime"
            label="支付时间"
            align="center"
          />
          <el-table-column
            prop="checker"
            label="对账人员"
            align="center"
          />
          <el-table-column
            prop="checkTime"
            label="对账时间"
            align="center"
          />
          <el-table-column
            prop="order.checkType"
            label="状态"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.checkType===PASS_DATA[0].value">{{ PASS_DATA[0].name }}</div>
              <div v-if="scope.row.checkType===PASS_DATA[1].value">{{ PASS_DATA[1].name }}</div>
              <div v-if="scope.row.checkType===PASS_DATA[2].value">{{ PASS_DATA[2].name }}</div>
              <div v-if="scope.row.checkType===PASS_DATA[3].value">{{ PASS_DATA[3].name }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <span
                class="see-detail"
                @click="seeDet(scope.row.orderCode)"
              >查看详情</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-block">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          :background="true"
          :current-page.sync="currentPage3"
          :page-size="pageSize"
          layout="prev, pager, next,total,slot, jumper"
          :total="total"
          hide-on-single-page
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <div
            class="page-number"
            layout="slot"
          >
            <div class="jump-button">跳至</div>
          </div>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getreconList, getSearchList } from '@/api/capital'
import { PASS_DATA, PAY_TYPE } from '@/utils/enum'
import reconList from '../../reconciliationList/reconDetail/index'
import { formatDateAndTime } from '@/utils/util'
import qs from 'qs'
export default {
  data() {
    return {
      PASS_DATA,
      // 订单编号
      input: '',
      // 状态
      value: '',
      // 最小金额
      smallPrice: '',
      // 最大金额
      bigPrice: '',
      // 状态列表
      reconOptions: [
        {
          value: 'ydz',
          label: '已对账'
        },
        {
          value: 'wdz',
          label: '未对账'
        }
      ],
      // 选择状态
      value2: '',
      showNumList: [
        {
          value: '4',
          label: '每页4条'
        },
        {
          value: '6',
          label: '每页6条'
        },
        {
          value: '10',
          label: '每页10条'
        }
      ],
      showNum: '',
      sortTypeList: [
        {
          value: '0',
          label: '倒序'
        }
      ],
      sortType: '',
      tableData: [],
      currentPage3: 1,
      pageSize: 6,
      total: 0
    }
  },
  created() {
    this.getData(this.currentPage3, this.pageSize)
  },
  methods: {
    // 获取列表数据
    getData(curPage, pageSize) {
      getSearchList({
        pageNum: curPage,
        pageSize: pageSize,
        start: this.smallPrice,
        end: this.bigPrice,
        orderCode: this.input,
        checkType: this.value2
      }).then(res => {
        console.log(res)
        for (let i = 0; i < res.data.list.length; i++) {
          if (res.data.list[i].order.orderTime) {
            res.data.list[i].order.orderTime = formatDateAndTime(
              res.data.list[i].order.orderTime
            )
          } else {
            res.data.list[i].order.orderTime = '/'
          }
          // console.log(res.data.list[i].order.payTime);

          if (res.data.list[i].order.payTime) {
            res.data.list[i].order.payTime = formatDateAndTime(
              res.data.list[i].order.payTime
            )
          } else {
            res.data.list[i].order.payTime = '/'
          }
          if (res.data.list[i].checkTime) {
            res.data.list[i].checkTime = formatDateAndTime(
              res.data.list[i].checkTime
            )
          } else {
            res.data.list[i].checkTime = '/'
          }
          res.data.list[i].order.payType = PAY_TYPE.getName(
            res.data.list[i].order.payType
          )
        }
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    // 搜索
    searchBtn() {
      this.getData(this.currentPage3, this.pageSize)
    },
    // 导出
    exportBtn() { },
    // 选择状态
    selStatus() {
      if (!this.value2 && !this.input && !this.smallPrice && !this.bigPrice) {
        this.getData(this.currentPage3, this.pageSize)
      }
    },
    // 选择条数
    selBar() {
      this.getData(this.currentPage3, this.pageSize)
    },
    // 设置标签
    setUpBtn() { },
    handleSizeChange() { },

    handleCurrentChange() {
      this.getData(this.currentPage3, this.showNum)
    },
    // 查看详情
    seeDet(code) {
      // console.log(e)
      this.$router.push({
        name: 'reconDetail',
        query: {
          code: code
        }
      })
    }
  }
}
</script>
